<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>应用题实现增加和修改功能</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>


    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
    <style type="text/css">
        div#app {
            margin: 20px auto;
            width: 500px;
            padding: 20px;
        }

        span {
            width: 80px;
            display: inline-block;
            text-align: center;
        }
    </style>
</head>
<body>
<div id="app">
    <div id="heroListTable">
        <div class="title">
            <strong>
                <span>id</span>
                <span>英雄名称</span>
                <span>血量</span>
            </strong>
        </div>
        <div v-for="hero in heroes">
            <span>{{hero.id}}</span>
            <span :contenteditable="hero.isEditable">{{hero.name}}</span>
            <span :contenteditable="hero.isEditable">{{hero.hp}}</span>
            <span style="width: 150px">
                    <button @click="edit(hero)">修改</button>
                    <button v-if="hero.isEditable" @click=submit(hero)>提交</button>
                    <button>删除</button>
                </span>
        </div>
        <div>
            <label>名称
                <input type="text" placeholder="请输入英雄名称" v-model="heroesPlus.inputName">
            </label><br />
            <label>血量
                <input type="text" placeholder="请输入血量" v-model="heroesPlus.inputVal">
            </label><br />
            <button  @click="add">增加</button>
        </div>
    </div>
</div>

<script type="text/javascript">
    data = {
        heroes: [
            { id: 1, name: '盖伦', hp: 318, isEditable: false },
            { id: 2, name: '提莫', hp: 320, isEditable: false },
            { id: 3, name: '安妮', hp: 419, isEditable: false },
            { id: 4, name: '死歌', hp: 325, isEditable: false },
            { id: 5, name: '米波', hp: 422, isEditable: false }
        ],
        heroesPlus: { id: '', inputName: '', inputVal: '', isEditable: false }
    };
    new Vue({
        el: '#app',
        data: data,
        methods: {
            add:function(){
                this.heroes.push({
                    id:this.heroes.length===0?1:(this.heroes[this.heroes.length-1].id)+1,
                    name:this.heroesPlus.inputName,
                    hp:this.heroesPlus.inputVal
                })
            },
            //在此键入代码
            edit(hero){
                hero.isEditable=true;
            },
            submit(hero){
                hero.isEditable=false;
            },

        }
    });
</script>
</body>
</html>
